$(function () {
  // 我们的翻页组件需要两个参数
  // 1. 当前页码是多少
  // 2. 一共有多少页
  // 在这里可以开始加载页面数据

  // 翻页组件本身并不管数据的获取, 还是需要 api
  // 获取文章的 api 需要翻页一个要两个参数
  // 1. page 当前页码
  // 2. perpage 每页长度
  let page = 1;
  let perpage = 10;
  // 有了这些数据以后，根据分页设定来获取数据

  // 设定两个默认的筛选条件
  let type = '';
  let state = '';

  postInit();
  cateInit();
  // 文章列表获取逻辑
  function postInit() {
    $.ajax({
      url: bignews.article_query,
      data: {
        page,
        perpage,
        type,
        state
      },
      success(res) {
        console.log(res);
        let htmlStr = template('articleTemp', res.data);
        // 获取完文章列表以后，将当前的数据中供多少页的数字作为参数
        // 用来渲染分页组件
        setPage(res.data.totalPage, page);
        $('tbody').html(htmlStr);
      }
    });
  }

  function setPage(totalPages, currentPage) {
    // 尝试使用分页组件
    $('.pagination').bootstrapPaginator({
      // 这里是分页属性
      bootstrapMajorVersion: 3,
      currentPage,
      totalPages,
      onPageClicked(event, originEvent, type, newPage) {
        // 翻页组件被点击时触发的回调
        // 里面可以接受四个参数，其中最重要的是第四个
        console.log('被点击了' + newPage);
        page = newPage;
        postInit();
      }
    });
  }

  function cateInit() {
    $.ajax({
      url: bignews.category_list,
      success(res) {
        console.log(res);
        let htmlStr = template('cateTemp', res);
        $('#selCategory').html(htmlStr);
      }
    });
  }

  // 监听筛选按钮的点击事件
  $('#btnSearch').on('click', function () {
    console.log($('#selStatus').val());
    console.log($('#selCategory').val());
    // 现在由默认的分类和状态保持变量，真的点击筛选时，就要改变这两个变量，再获取数据
    type = $('#selCategory').val();
    state = $('#selStatus').val();
    // 每次筛选的时候，如果当前页码在数据总数范围外，则会报错
    // 每当筛选时，先恢复第一页
    page = 1;
    // 点击筛选，可以调用文章获取函数
    postInit();
  });

  // 时间委托绑定按钮的点击事件
  $('tbody').on('click', '#btn-del', function () {
    // console.log('点击了');
    // 获取当前按钮的id 自定义属性，发送请求删除文章
    $.ajax({
      type: 'post',
      url: bignews.article_delete,
      data: { id: $(this).data('id') },
      success(res) {
        console.log(res);
        if (res.code == 204) {
          postInit();
        }
        // 这里还能用正则 /^2\d{2}$/  或者 /^2\d\d$/
        // const regExp = /^2\d{2}$/;
        // if (regExp.test(res.code)) {
        //   postInit();
        // }
      }
    });
  });
})